<template>
  <div class="pad-20 text-nowrap">
    <div class="font-20">账号设置</div>

	<Lines h="1px" w="100%" bg="#E6E8EB" class="mar-t-20" />

    <div class="flex justify-between mar-t-30">
        <div class="flex">
            <span class="color-515767 mar-r-20">手机</span>
            <div class="mar-l-20 color-8a919f">{{ userInfo && userInfo.phone ? userInfo.phone : '' }}</div>
        </div>

        <span class="vanish_items color-1e80ff cur-pointer" @click="openChangePhone(1)">换绑</span>

        <div class="appear_items">
            <el-button type="primary" size="mini" @click="openChangePhone(2)">换绑</el-button>
        </div>
    </div>

	<Lines h="0.5px" w="100%" bg="#E6E8EB" class="mar-t-30" />

    <div class="flex justify-between mar-t-30">
        <div class="flex">
            <span class="color-515767">密码</span>
        </div>

        <span class="vanish_items color-1e80ff cur-pointer" @click="openResetDialog(1)">重置</span>
        
        <div class="appear_items">
            <el-button type="primary" size="mini" @click="openResetDialog(2)">重置</el-button>
        </div>
    </div>

	<Lines h="0.5px" w="100%" bg="#E6E8EB" class="mar-t-30" />

    <div class="flex justify-between mar-t-30">
        <div class="flex">
            <span class="color-515767">账号注销</span>
        </div>

        <span class="vanish_items color-1e80ff cur-pointer" @click="delAccount()">注销</span>
        <div class="appear_items">
            <el-button type="default" size="mini" @click="handleConfirm()">注销</el-button>
        </div>
        
    </div>

	<Lines h="0.5px" w="100%" bg="#E6E8EB" class="mar-t-30" />

    <!-- 重置密码弹窗 -->
    <el-dialog title="重置密码" :visible.sync="dialogFormVisible" :width="pswDialogWidth" :close-on-click-modal="false">
        <div class="vanish_items text-nowrap">
            <div class="flex align-center">
                <div class="w-px-120 text-right">
                    <span class="color-ff0000 mar-r-5">*</span>
                    <span class="color-999999">163邮箱：</span>
                </div>
                <el-input v-model="form.name" placeholder="请输入163邮箱" clearable>
                    <template slot="append">.com</template>                    
                </el-input>
            </div>

            <div class="flex mar-t-20 align-center">
                <div class="w-px-120 text-right">
                    <span class="color-ff0000 mar-r-5">*</span>
                    <span class="color-999999">邮箱验证码：</span>
                </div>

                <el-input v-model="form.captcha" placeholder="请输入邮箱验证码" clearable>
                    <el-button slot="append" @click="handleSendEmailCode()">获取</el-button>
                </el-input>
            </div>

            <div class="flex mar-t-20 align-center">
                <div class="w-px-120 text-right">
                    <span class="color-ff0000 mar-r-5">*</span>
                    <span class="color-999999">新密码：</span>
                </div>

                <el-input :type="eyeState ? 'password' : 'text'" v-model="form.newPassword" placeholder="请输入新密码"  clearable>
                    <template slot="suffix">
                        <div class="cur-pointer flex mar-r-15 align-center h100" @click="changeEyes(1)" >
                            <SvgIcons :iconClass="eyeState ? 'closeEye_icon' : 'openEye_icon'" class="font-18" />
                        </div>
                    </template>
                </el-input>
            </div>

            <div class="flex mar-t-20 align-center">
                <div class="w-px-120 text-right">
                    <span class="color-ff0000 mar-r-5">*</span>
                    <span class="color-999999">确认密码：</span>
                </div>

                <el-input :type="eyeConfirmState ? 'password' : 'text'" v-model="form.confirmPsw" placeholder="请再次确认密码"  clearable>
                    <template slot="suffix">
                        <div class="cur-pointer flex mar-r-15 align-center h100" @click="changeEyes(2)" >
                            <SvgIcons :iconClass="eyeConfirmState ? 'closeEye_icon' : 'openEye_icon'" class="font-18" />
                        </div>
                    </template>
                </el-input>
            </div>
        </div>

        <div class="appear_items text-nowrap">
            <div class="align-center">
                <div class="align-center pad-y-10">
                    <span class="color-ff0000 mar-r-5">*</span>
                    <span class="mar-r-20 color-999999">163邮箱</span>
                </div>
                <el-input v-model="form.name" placeholder="请输入163邮箱" clearable>
                    <template slot="append">.com</template>                    
                </el-input>
            </div>

            <div class="align-center">
                <div class="flex align-center pad-y-10">
                    <span class="color-ff0000 mar-r-5">*</span>
                    <span class="mar-r-20 color-999999">邮箱验证码</span>
                </div>

                <el-input v-model="form.captcha" placeholder="请输入邮箱验证码" clearable>
                    <el-button slot="append" @click="handleSendEmailCode()">获取</el-button>
                </el-input>
            </div>

            <div class="align-center">
                <div class="flex align-center pad-y-10">
                    <span class="color-ff0000 mar-r-5">*</span>
                    <span class="mar-r-20 color-999999">新密码</span>
                </div>

                <el-input :type="eyeState ? 'password' : 'text'" v-model="form.newPassword" placeholder="请输入新密码"  clearable>
                    <template slot="append">
                        <div class="mar-t-3 mar-r-10 cur-pointer" @click="changeEyes(1)" >
                            <SvgIcons :iconClass="eyeState ? 'closeEye_icon' : 'openEye_icon'" class="font-18" />
                        </div>
                    </template>
                </el-input>
            </div>

            <div class="align-center">
                <div class="flex align-center pad-y-10">
                    <span class="color-ff0000 mar-r-5">*</span>
                    <span class="mar-r-20 color-999999">确认密码</span>
                </div>

                <el-input :type="eyeConfirmState ? 'password' : 'text'" v-model="form.confirmPsw" placeholder="请再次确认密码"  clearable>
                    <template slot="append">
                        <div class="mar-t-3 mar-r-10 cur-pointer" @click="changeEyes(2)" >
                            <SvgIcons :iconClass="eyeConfirmState ? 'closeEye_icon' : 'openEye_icon'" class="font-18" />
                        </div>
                    </template>
                </el-input>
            </div>
        </div>

        <div slot="footer">
            <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" size="small" @click="handleResetPassword()">确 定</el-button>
        </div>
    </el-dialog>

    <!-- 绑定手机弹窗 -->
    <el-dialog
        title="请输入手机号"
        :visible.sync="dialogVisible"
        :width="phoneDialogWidth"
        :close-on-click-modal="false"
    >
        <template>
            <el-input v-model="phoneValue" placeholder="请输入手机号" pattern="^1[3-9]\d{9}$" :maxlength="11" clearable></el-input>
        </template>

        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" size="small" @click="changeBind()">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 移动 - 注销账号确认框 -->
    <Confirm
        v-model="confirm.show"
        content="确定注销该账号吗？"
        @on-confirm="doDelAccount()"
        @on-cancel="doCancel()"
    />
  </div>
</template>

<script>
    import Lines from '@/components/Lines/index'
	import SvgIcons from '@/components/SvgIcons/index'
    import Confirm from '@/components/CustomConfirm'
    import Utils from '@/utils/utils'

    import { mapState } from 'vuex'
    import { delAccount, sendEmailCode, bindPhone } from '@/apis/user'

    export default {
        props: {

        },
        components: {
            Lines,
            Confirm,
            SvgIcons
        },

        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo, // 用户信息
                token: state => state.user.token, // token
            })
        },

        data() {
            return {
                pageLoading: false, // 页面加载中
                eyeState: true, // 密码可见状态，默认 不可见
                eyeConfirmState: true, // 确认密码可见状态，默认 不可见
                dialogFormVisible: false, // 重置密码弹窗
                dialogVisible: false, // 绑定手机号弹窗
                phoneValue: '', // 手机号
                pswDialogWidth: '500px', // 重置密码弹窗宽度
                phoneDialogWidth: '500px', // 绑定手机号弹窗宽度

                form: { // 重置密码表单
                    name: '',
                    newPassword: '',
                    captcha: '',
                    confirmPsw: '',
                },

                // 移动 - 注销确认框
                confirm: {
                    show: false,
                }   
            }
        },
        methods: {
            // 绑定手机号接口
            findBindPhone() {
                bindPhone({phone: this.phoneValue}).then(res => {
                    if (res.code === 200) {
                        this.userInfo.isBindMobile = true
                        this.$store.dispatch('user/getUserInfo')
                        Utils.popUpMsg('success', '绑定成功', 1000)
                    } else {
                        Utils.popUpMsg('error', '绑定失败', 1000)
                    }
                }).catch(err => {
                })
            },

            // 换绑手机号
            changeBind() {
                if (!this.phoneValue) {
                    Utils.popUpMsg('error', '请输入手机号', 1000)
                    return
                } else if (!this.phoneValue.match(/^1[3-9]\d{9}$/)) {
                    Utils.popUpMsg('error', '请输入正确的手机号', 1000)
                    return
                }
                this.dialogVisible = false
                this.findBindPhone()
            },

            // 打开手机号弹窗
            openChangePhone(type) {
                if (type === 1) {
                    this.phoneDialogWidth = '500px'
                } else if (type === 2) {
                    this.phoneDialogWidth = '90%'
                }

                this.dialogVisible = true
            },

            // 点击眼睛切换状态
            changeEyes(type) {
                if (type === 1) {
                    this.eyeState = !this.eyeState
                } else if (type === 2) {
                    this.eyeConfirmState = !this.eyeConfirmState
                }
            },

            // 发送邮箱验证码接口
            handleSendEmailCode() {
                this.pageLoading = Utils.loading('发送中...')
                let data = {
                    email: this.form.name
                }
                sendEmailCode(data).then(res => {
                    this.pageLoading.close()

                    if(res.code == 200) {
                        Utils.popUpMsg('success', res.msg, 3000)
                    } else {
                        this.pageLoading.close()
                        Utils.popUpMsg('error', res.msg, 3000)
                    }
                }).catch(err => {
                    this.pageLoading.close()
                })
            },

            // 重置密码接口
            handleResetPassword() {
                if(this.form.newPassword != this.form.confirmPsw) {
                    Utils.popUpMsg('error', '密码不一致', 3000)
                    return
                }
                this.pageLoading = Utils.loading('密码重置中...')
                let data = {
                    email: this.form.name,
                    captcha: this.form.captcha,
                    newPassword: this.form.newPassword,
                }
                resetPassword(data).then(res => {
                    this.pageLoading.close()
                    if(res.code == 200) {
                        dialogFormVisible = false
                    } else {
                        this.pageLoading.close()
                        Utils.popUpMsg('error', res.msg, 3000)
                    }
                }).catch(err => {
                    this.pageLoading.close()
                })
            },

            // 打开注销账号弹窗
            delAccount() {
                Utils.confirmPopUpMsg('warning', '注意，账号注销后3 天内重新登录，可取消注销，是否继续注销？', '注销', () => {
                    this.pageLoading = Utils.loading('注销中...')

                    delAccount().then(res => {
                        this.pageLoading.close()

                        if(res.code == 200) {
                            Utils.popUpMsg('success', res.msg, 3000)
                            this.$store.commit('user/logout')
                            this.$router.push({
                                path: '/',
                            })
                        }
                    }).catch(err => {
                        this.pageLoading.close()
                    })
                }, () => {
                    console.log('取消注销账号！')
                })
            },

            // 重置密码
            openResetDialog(type) {
                if (type === 1) {
                    this.pswDialogWidth = '500px'
                } else if (type === 2) {
                    this.pswDialogWidth = '90%'
                }

                this.dialogFormVisible = true
            },

            // 移动 - 确认弹窗
            handleConfirm() {
                this.confirm.show = true
            },

            doDelAccount() {
                this.pageLoading = Utils.loading('注销中...')

                delAccount().then(res => {
                    this.pageLoading.close()

                    if(res.code == 200) {
                        Utils.popUpMsg('success', res.msg, 3000)
                        this.$store.commit('user/logout')
                        this.$router.push({
                            path: '/',
                        })
                    }
                }).catch(err => {
                    this.pageLoading.close()
                })
            },

            // 移动 - 取消注销账号
            doCancel() {
                this.confirm.show = false
                Utils.popUpMsg('info', '取消注销账号！', 1000)
            },
        },
    }
</script>

<style lang='scss' scoped>
@media screen and (max-width: 750px) {
    .vanish_items {
        display: none;
    }
   
}
@media screen and (min-width: 750px) { 
    .appear_items {
        display: none;
    }
}
</style>